<template>
  <div>
    <h3>当前计数值：{{count}}</h3>
    <!-- 3.使用 -->
    <button @click="ADD(1)">+1</button>
    <button @click="addDelay(2)">延迟1秒+2</button>
    <h3>当前计数值10倍：{{countPlus}}</h3>
    <h3 style="color:red">人员列表长度：{{personList.length}}</h3>
  </div>
</template>

<script>
// 1.引入
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  mounted () {
    console.log(this.$store)
  },
  computed: {
    // 2.数据映射
    ...mapState('countStore', ['count']),
    ...mapGetters('countStore', ['countPlus']),
    // 取另一个模块的数据
    ...mapState('personStore', ['personList'])

  },
  methods: {
    // 2.方法映射
    ...mapMutations('countStore', ['ADD']),
    ...mapActions('countStore', ['addDelay'])
  }
}
</script>
